{% extends 'backend/subpage/backBase.html' %}
{% block crumb_content %}
    <ol class="breadcrumb">
        <li><a href="/main/userManage">后台管理</a></li>
        <li><a href="/main/emailManage">邮件管理</a></li>
        <li class="active">邮件地址</li>
    </ol>
    <div class="well">
        邮件地址列表
        {% block action_block %}
            <button class="btn btn-info pull-right" data-toggle="modal" data-target="#addressModal"
                    data-whatever="新增地址" data-action="create">新增地址
            </button>
        {% endblock %}
    </div>
    <!-- Modal -->
    <div class="modal fade" id="addressModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal address-form" onsubmit="return false;">
                        <div class="form-group">
                            <label for="receiver" class="col-sm-2">收件人</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="receiver"
                                       placeholder="收件人"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="receiveAlias" class="col-sm-2">收件人别称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="receiveAlias"
                                       placeholder="收件人别称"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="addressName" class="col-sm-2">邮件地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="addressName" placeholder="邮件地址"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary confirm-action">确认</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block backend_content %}
    <div class="backend_info_table">

    </div>
    <div class="pagination-box">

    </div>
    <script>
        $(function () {
            var cur_item = GetQueryString("per_page") || 15, page = GetQueryString("page") || 1;//配置一页所显示的数据总数以及默认显示为第一页
            $("#body-content").delegate(".showPageItemsBox select", "change", function () {
                cur_item = $(this).val();
                window.location.href = "/main/emailManage/address?page=" + page + "&per_page=" + cur_item;
            });
            loadAddressList();
            function loadAddressList() {
                ajaxRequestJson("GET", "/main/receive?page=" + page + "&per_page=" + cur_item, {}, function (data) {
                    if (data.code === 0) {
                        var str = "";
                        if (data.data.length === 0) {
                            $(".backend_info_table").html("<h4 class='text-center'>暂无地址信息</h4>");
                        } else {
                            str += '<table class="table table-bordered"><thead><tr>' +
                                '<th>地址ID</th>' +
                                '<th>邮件名称</th>' +
                                '<th>收件人</th>' +
                                '<th>收件人别名</th>' +
                                '<th>操作</th>' +
                                '</tr></thead>';
                            for (var i = 0; i < data.data.length; i++) {
                                var item = data.data[i];
                                var menu = '<div class="dropdown">' +
                                    '<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu' + i + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">操作' +
                                    '<span class="caret"></span>' +
                                    '</button>' +
                                    '<ul class="dropdown-menu" aria-labelledby="dropdownMenu' + i + '">' +
                                    '<li><a style="cursor:pointer;" data-toggle="modal" data-target="#addressModal" class="edit-action" data-action="edit" data-id="' + item.receive_id + '" data-whatever="地址编辑">编辑</a></li>' +
                                    '<li><a style="cursor:pointer;" class="delete-action" data-id="' + item.receive_id + '">删除</a></li>' +
                                    '</ul>' +
                                    '</div>';
                                str += '<tr><td>' + item.receive_id + '</td><td>' + item.address + '</td><td>' + item.receive_name + '</td><td>' + (item.receive_alias || "暂无") + '</td>';
                                str += '<td>' + menu + '</td></tr>';
                            }
                            $(".backend_info_table").html(str);
                            loadPaginator("/main/emailManage/address", cur_item, ".pagination-box", data, [15, 20, 30]);
                        }

                    } else {
                        swal("糟糕!", data.msg, "error");
                    }
                }, function (error) {
                    swal("糟糕!", "请求失败！", "error");
                });
            }

            $("#addressModal").on('show.bs.modal', function (event) {
                /*--------modal变量-------*/
                var addressName, receiveAlias, receiver;
                /*--------\modal变量-------*/

                var button = $(event.relatedTarget);
                var modal_title = button.data("whatever");
                var operation = button.data("action");
                $(".modal-title").html(modal_title);
                if (operation === "create") {
                    //重置表单为空
                    $(".address-form")[0].reset();
                    $("#receiver").val("").attr("disabled", false);
                } else {//修改
                    var address_id = button.data("id");
                    ajaxRequestJson("GET", "/main/receive/" + address_id, "", function (data) {
                        if (data.code === 0) {
                            /*赋值*/
                            $("#addressName").val(data.data.address);
                            $("#receiveAlias").val(data.data.receive_alias);
                            $("#receiver").val(data.data.receive_name).attr("disabled", true);
                            /*\赋值*/
                        } else {
                            swal("糟糕!", "请求出错！", "error");
                        }

                    }, function (error) {
                        swal("糟糕!", "请求失败！", "error");
                    });
                }
                $(".confirm-action").click(function () {
                    if (operation === "create") {
                        receiver = $("#receiver").val();
                        addressName = $("#addressName").val();
                        receiveAlias = $("#receiveAlias").val();
                        if (receiver.replace(/(^\s*)|(\s*$)/g, "") && addressName.replace(/(^\s*)|(\s*$)/g, "") && receiveAlias.replace(/(^\s*)|(\s*$)/g, "")) {
                            ajaxRequestJson("POST", "/main/receive", {
                                receive_name: receiver,
                                receive_alias: receiveAlias,
                                address: addressName
                            }, function (data) {
                                if (data.code === 0) {
                                    $("#addressModal").modal("hide");
                                    swal("该条数据已成功添加!", {
                                        icon: "success"
                                    }).then(function (confirm) {
                                        if (confirm) {
                                            loadAddressList();
                                        }
                                    });
                                } else {
                                    swal("糟糕!", data.msg, "error");
                                }
                            }, function (error) {
                                swal("糟糕!", "请求失败！", "error");
                            });
                        } else {
                            swal("警告！", "请完善参数再提交！", "warning");
                        }

                    } else {//edit
                        addressName = $("#addressName").val();
                        receiveAlias = $("#receiveAlias").val();
                        if (addressName.replace(/(^\s*)|(\s*$)/g, "") && receiveAlias.replace(/(^\s*)|(\s*$)/g, "")) {
                            ajaxRequestJson("PUT", "/main/receive/" + address_id, {
                                address: addressName,
                                receive_alias: receiveAlias
                            }, function (data) {
                                if (data.code === 0) {
                                    $("#addressModal").modal("hide");
                                    swal("该条数据已成功修改!", {
                                        icon: "success"
                                    }).then(function (confirm) {
                                        if (confirm) {
                                            loadAddressList();
                                        }
                                    });
                                } else {
                                    swal("糟糕!", data.msg, "error");
                                }
                            }, function (error) {
                                swal("糟糕!", "请求出错！", "error");
                            });
                        } else {
                            swal("警告！", "请完善参数再提交！", "warning");
                        }
                    }
                });
            });

            //删除功能
            $(".backend_info_table").on("click", ".delete-action", function (event) {
                //获取地址id
                var address_id = $(event.target).data("id");
                swal({
                    title: "Warning!",
                    text: "是否确认要删除？",
                    icon: "warning",
                    buttons: {
                        cancel: "不，谢谢",
                        confirm: "确定"
                    }
                }).then(function (willDelete) {
                    if (willDelete) {
                        ajaxRequestJson("DELETE", "/main/receive/" + address_id, "", function (data) {
                            if (data.code === 0) {
                                swal("该条数据已成功删除!", {
                                    icon: "success"
                                });
                                loadAddressList();
                            } else {
                                swal("糟糕!", "删除失败!", "error");
                            }
                        }, function (error) {
                            swal("糟糕!", "请求失败!", "error");
                        });
                    } else {
                        swal("你的数据是安全的!");
                    }
                });

            });

        });
    </script>
{% endblock %}